<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-card>
      <a-row :gutter="[16,16]">
      <a-col>
        <sk-table-header ref="skTableHeader" @dataFrom="getDataFrom"></sk-table-header>
      </a-col>
    </a-row>
    <a-row :gutter="[16,16]">
      <a-col :sm="12" :xxl="4">
        <info ref="infoRef" @detail="handleDetail"></info>
      </a-col>
      <a-col :sm="12" :xxl="6">
        <attendance ref="attendanceRef" @detail="handleDetail"></attendance>
      </a-col>
      <a-col :sm="24" :xxl="14">
        <temp ref="tempRef" @detail="handleDetail"></temp>
      </a-col>
    </a-row>
    <a-row :gutter="[16,16]">
      <a-col :sm="24" :xxl="10">
        <sport ref="sportRef" @detail="handleDetail"></sport>
      </a-col>
      <a-col :sm="24" :xxl="14">
        <bmi ref="bmiRef" @detail="handleDetail"></bmi>
      </a-col>
    </a-row>
    <a-row :gutter="[16,16]">
      <a-col :sm="24" :xxl="10">
        <life ref="lifeRef" @detail="handleDetail"></life>
        <notes ref="recordRef" @detail="handleDetail"></notes>
        <points ref="pointsRef" @detail="handleDetail"></points>
      </a-col>
      <a-col :sm="24" :xxl="14">
        <like-area ref="likeAreaRef" @detail="handleDetail"></like-area>
      </a-col>
    </a-row>
    </a-card>
  </div>
</template>
<script>

import { getFileAccessHttpUrl, getAction } from '@/api/manage';
import skTableHeader from './skTableHeader'
import info from './modules/info'
import attendance from './modules/attendance'
import temp from './modules/temp'
import sport from './modules/sport'
import bmi from './modules/bmi'
import life from './modules/life'
import notes from './modules/notes'
import points from './modules/points'
import likeArea from './modules/likeArea'
export default {
  name: 'studentShow',
  data() {
    return {
      studentId: '1630131172084494337',
      dataDate: '',
      nextDate: '',
      pageSize: 5,
    }
  },
  props:[],
  components: {
    skTableHeader,
    info,
    attendance,
    temp,
    sport,
    bmi,
    life,
    notes,
    points,
    likeArea
  },
  filters: {},
  
  computed: {},
  
  created() {},
  
  activated() {
  },

  mounted() {
    // this.load();
  },

  methods: {
    getDataFrom(dataForm) {
      console.log('dataForm', dataForm);
      this.studentId = dataForm.studentId
      this.$refs.infoRef.load(dataForm);
      this.$refs.attendanceRef.load(dataForm);
      this.$refs.tempRef.load(dataForm);
      this.$refs.sportRef.load(dataForm);
      this.$refs.bmiRef.load(dataForm);
      this.$refs.lifeRef.load(dataForm);
      this.$refs.recordRef.load(dataForm);
      this.$refs.likeAreaRef.load(dataForm);
      this.$refs.pointsRef.load(dataForm);
    },
    handleDetail(type){
      switch(type) {
        case 'attendance':
          this.$router.push('/attendance/skCard');
          break;
        case 'temp':
          this.$router.push('/health/skTemperatureRecordList');
          break;
        case 'bmi':
          this.$router.push('/health/SkBmiCard');
          break;
        case 'life':
          this.$router.push('/health/skLifeCard');
          break;
        case 'sport':
          this.$router.push('/health/SkSports');
          break;
        case 'area':
          this.$router.push('/management/SkAreaIndex');
          break;
        case 'notes':
          this.$router.push('/management/SkTakeNotesList');
          break;
        case 'points':
          this.$router.push('/management/SKTeachingActivitiesList');
          break;
      }
    },
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-card {
  // height: 308px;

  .ant-card-body{
    padding: 16px;
    .ant-card-head {
      border-bottom: unset;
    } 
    .ant-card-head-wrapper {
      height: 40px;
    }

    .ant-card-head-title .title {
      margin-bottom: 14px;
      font-size: 20px;
    }
    .ant-card-head-title .subtitle {
      margin-bottom: 14px;
      padding-left:10px;
    }
  }
  .card-content {
    height: 228px;
  }
}

/deep/ .anticon-man {
  color: #1890FF;
}
/deep/ .anticon-woman {
  color: #db7093;
}

/deep/ .ant-statistic{
  margin-bottom: 10px;
}

</style>
